<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>白大师官网注册</title>
    <link rel="icon" href="images/tea_favicon.ico">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!--引入字体图标-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="bower_components/bootstrap/bootstrap.css">
    <!--引入axios和vue-->
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
        //全登陆不允许iframe嵌入
        if (window.top !== window.self) {
            window.top.location = window.location;
        }
        window.enableWwSsoPluginLogin = true;
    </script>
    <style>
        body{
            width:1200px;
            margin: 0 auto;
        }



        #zhucekuang{
            position: absolute;
            margin-left:450px;
        }


        section{

            height: 550px;
            /*width: 1200px;*/
            /*background-size:200%;*/

        }

        .panel-title1{
            margin-left:12px
        }
        .panel-heading>a{
            padding-right: 4px;
        }
        #from-group1{
            margin-bottom:10px;
        }

        #button{
            width:300px
        }
        #from-group1>.col-sm-12{
            position: relative;
        }
        .reg-group{
            font-size: 5px;
            float: right;
        }
        #panel-title1{
            color: #3c3c3c;
            font-size: 16px;
            margin-left: 0;
        }

        #footer{
            margin-top: 500px;
        }
        #row{
            margin-top:150px;
            margin-right:-60px;
        }

        #zhucekuang1{
            width: 330px;
        }

        .container{
            margin: 0 auto;
            position: relative;
        }

    </style>
</head>
<body>
<section class="container">
    <div class="row" id="row">
        <div class="col-md-3 col-md-offset-8" id="zhucekuang">
            <div class="panel panel-default" id="zhucekuang1">
                <div class="panel-heading" style="text-align: center">
                    <a href="javascript:void(0)" style="text-decoration: none "><span id="panel-title1" class="panel-title1">用户注册</span></a>
                </div>

                <div class="panel-body">
                    <!--登录表单开始-->
                    <form class="form-horizontal" id="reg" @submit.prevent="register()">
                        <div id="error"
                             class="alert alert-danger"
                             style="display: none"
                             :class="{'d-block':hasError}">
                            <i class="fa fa-exclamation-triangle"></i>
                            <span v-text="message">手机号码格式不正确！</span>
                        </div>
                        <div class="form-group" id="from-group1">
                            <div class="col-sm-12" >

                                <input  type="text" class="form-control" id="inputEmail3"  name="username" placeholder="请输入手机号" style="width:300px"
                                    pattern="^\d{11}$" required="required" v-model="username">
                                <!--                                <span class="fa fa-user form-control-icon" id="user-icon"></span>-->
                            </div>
                        </div>
                        <div class="form-group" id="from-group5">
                            <div class="col-sm-12" >
                                <input  type="text" class="form-control" id="inputEmail5"  name="nickname" placeholder="请设置昵称,长度为2-20个字符" style="width:300px"
                                 pattern="^.{2,20}$" required="required" v-model="nickname" >
                                <!--                                <span class="fa fa-user form-control-icon" id="user-icon"></span>-->
                            </div>
                        </div>
                        <div class="form-group" id="from-group2">
                            <div class="col-sm-12">
                                <input class="form-control" id="inputPassword4" type="password" placeholder="请设置密码6-20个字母、数字、下划线"
                                       name="password" style="width:300px"
                                pattern="^\w{6,20}$" required="required" v-model="password">
                                <!--                                <span class="fa fa-lock form-control-icon" id="password-icon"></span>-->
                            </div>
                        </div>
                        <div class="form-group" id="from-group">
                            <div class="col-sm-12">
                                <input class="form-control" id="inputPassword3" type="password" placeholder="请再次输入密码" name="confirm" style="width:300px"
                                required="required" v-model="confirm">
                                <!--                                <span class="fa fa-lock form-control-icon" id="password-icon"></span>-->
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-12" style="text-align: center">
                                <button id="button" type="submit" class="btn btn-info">注册</button>
                            </div>
                        </div>
                        <div class="reg-group">
                            <a href="login.html" style="text-decoration:none">已有账号免费登录</a>
                        </div>
                    </form>
                    <!--登录表单结束-->
                </div>
            </div>
        </div>
    </div>
</section>
    <footer class="container" >
        <div style="text-align: center" id="footer">
            Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3
        </div>
    </footer>
</body>
<script src="js/utils.js"></script>
<script src="js/register.js"></script>
</html>